<template>
  <div class="card w-full relative flex flex-col h-full">
    <img :src="CardBg" class="w-full h-full object-fill" />
    <div
      class="absolute top-0 left-0 right-0 bottom-0 flex flex-col overflow-hidden"
    >
      <div
        class="h-[42px] leading-[42px] pl-[20px] pr-[15px] text-white font-bold text-[18px] relative flex justify-between items-center flex-nowrap"
      >
        <span class="pl-[20px]" style="font-family: PMZD">{{ title }}</span>
        <img
          src="/static/topline.png"
          class="absolute top-[50%] translate-y-[-50%] w-full z-0 h-[36px] left-[10px]"
        />
        <div class="relative z-10">
          <slot name="rightTitle"></slot>
        </div>
      </div>
      <div class="flex-1 overflow-auto py-[10px] px-[20px] flex flex-col">
        <slot />
      </div>
    </div>
  </div>
</template>
<script setup>
import CardBg from "/static/cardBG.png";
defineProps({
  title: String,
  bg: {
    type: String,
    default: "1",
  },
});
</script>
<style scoped lang="less">
.card {
  background: rgba(25, 45, 67, 0.2);
  backdrop-filter: blur(20px); /* 背景模糊 */
  -webkit-backdrop-filter: blur(20px); /* 兼容老版本 Safari */
}

.custom-input {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;

  &:hover,
  &:focus {
    border-color: #3faa90;
    box-shadow: none;
  }

  input {
    background-color: transparent;
    color: #fff;
  }
}
</style>
